<template>
	<div class="fun_category" :id="funCategory">
		<div v-for="fs in funcSubjectList">
			<div class="project">
				<div class="project_banner" >
					<img :src="fs.banner">
					<div class="project_desc">
						<ul>
							<li>{{fs.name}}</li>
							<li>{{fs.brief}}</li>
							<li><router-link tag="a" :to="{ name: 'subject', params: { subjectId: fs.id || '123' }}">查看全部</router-link></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="swiper-container project_items" id="project_items">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide swiper-product-detail"  v-for="sgood in fs.goods" style="width:125px;">
			        	<router-link tag="img" :src="sgood.cover" :to="{ name: 'productDetail', params: { id: sgood.id }}"></router-link>
			        	<p class="mb0 project_item-name">{{sgood.name}}</p>
			        </div>
			        <div class="swiper-slide">
			        	<div class="viewAll">
				        	<div>
				        		<p class="mb0 view_all">查看全部</p>
				        		<p class="mb0">View All</p>
				        	</div>
			        	</div>
			        </div>
			    </div>
			</div>
			
		</div>
		<!-- <div id="hahah" style="width:6.4rem;height:100px;">
			dfsfdfosfjdios
		</div> -->
	</div>
</template>
<script>
	import { mapGetters, mapActions } from 'vuex'
	import 'src/lib/js/swiper-3.3.1.zepto.min.js'
	import '../index.less'
	import 'src/lib/style/swiper-3.3.1.min.css'
	import 'src/lib/js/touch.js'
	let projectSwiper = new Swiper('.swiper-container',{
		slidesPerView : 3,
	});
	// $('#hahah').tap(function(){
	// 	alert();
	// })
	export default {
		computed: mapGetters({
			funcSubjectList:'funcSubjectList'
		}),
		methods: {
			...mapActions([
				'getFuncSubjects'
			])
		},
		created (){
			this.$store.dispatch( 'getFuncSubjects','list' )
		}
	}
</script>





